<template>
  <div class="user-info page-exp">
    <pageHeader></pageHeader>
    <div class="user-content">
      <div class="user-title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="wrap" v-loading="loading">
          <template v-if="message.length > 0">
            <div class="list flex-rb" v-for="item in message" :key="item.id" @click="goDetail(item)">
              <img :src="item.photo" alt />
              <p :title="item.title">{{ item.title }}</p>
              <span class="time">{{ tool.timeCycle(item.updateTime) }}</span>
            </div>
          </template>
          <div class="noData" v-if="!loading && message.length == 0">暂无数据</div>
          <el-pagination
            v-if="message.length > 0"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.page"
            :page-size="pagination.limit"
            layout="total, prev, pager, next"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  components: {
    pageHeader,
    PageFooter
  },
  data() {
    return {
      newId: this.$route.query.newId,
      loading: true,
      logoImg: require("@/assets/img/home/logo.png"),
      pagination: {
        page: 1,
        limit: 5,
        total: 0
      },
      message: []
    };
  },
  created() {
    this.getMessageList();
  },
  methods: {
    getMessageList() {
      let that = this;
      let time = new Date().valueOf();
      that.loading = true;
      that
        .$http({
          url: "/wisdomlearn/information/selectAllInformation",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/information/selectAllInformation", time),
            timestamp: time
          },
          data: {
            columnId: that.newId,
            pageIndex: that.pagination.page + "",
            pageSize: that.pagination.limit + ""
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.pagination.total = res.data.total;
            res.data.list.forEach(elem => {
              elem.photo = that.config.imgPath + elem.photo;
            });
            that.message = res.data.list;
            that.loading = false;
          }
        })
        .catch(err => {
          that.loading = false;
        });
    },
    // 跳转-新闻详情页
    goDetail(item) {
      let that = this;
      that.$router.push({
        path: "/personalcenter/newDetail",
        query: {
          info: JSON.stringify({
            id: item.id,
            page: that.pagination.page,
            limit: that.pagination.limit
          }),
          newId: that.newId, //栏目Id
          title: item.title,
          time: item.updateTime
        }
      });
    },
    handleSizeChange(val) {
      this.pagination.limit = val;
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.getMessageList();
    }
  }
};
</script>
<style scoped>
.user-content {
  flex: 1;
  min-width: 1200px;
}
.user-title {
  width: 100%;
  height: 82px;
  background-color: #f0efef;
  font-family: PingFangSC-Medium;
  font-size: 21px;
  display: flex;
  align-items: center;
}
.user-title p {
  width: 1200px;
  margin: 0 auto;
}
.container .wrap {
  width: 1200px;
  margin: 0 auto 0;
  background: #fff;
  padding: 0 10px;
}
.wrap .list {
  border-bottom: 1px solid #e1dede;
  padding: 25px 0;
  align-items: flex-start;
}
.wrap .list:hover p,
.wrap .list:hover .time {
  color: #409eff;
}
.wrap .list img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.wrap .list p {
  width: 70%;
  font-size: 16px;
  color: #191a1d;
  letter-spacing: 0.09px;
  margin-left: 20px;
  cursor: pointer;
}
.wrap .list .time {
  margin-left: auto;
  font-size: 14px;
  color: #8b8b8d;
  letter-spacing: 0.08px;
}
</style>
<style>
.el-breadcrumb {
  width: 1200px;
  margin: 0 auto;
}
</style>
